<template>
    <l-page class="block pb-3 overflow-auto" :style="style">
        <l-navbar :title="detail.name" />
        <view class="m-3 mt-8">
            <view class="text-yellow-500 text-shadow text-2xl font-bold">
                {{ detail.name }}
            </view>
            <view class="text-white text-shadow text-xl">{{ detail.subject }}</view>
            <view class="bg-blue-300 rounded mt-2 p-3 text-white">
                一站式按揭贷款服务，令您的置业省时、省心、省力、省钱
            </view>
        </view>
        <view class="panel !pt-0 !px-0">
            <view class="title">
                <view class="content text-shadow">
                    专心 专注 专业
                </view>
            </view>
            <view class="title-label">
                <view class="content">产品简介</view>
            </view>
            <view class="p-3">
                <rich-text :nodes="detail.desc"></rich-text>
            </view>
            <view class="title-label">
                <view class="content">合作伙伴</view>
            </view>
            <view class="grid grid-cols-5 gap-1 py-3 px-2">
                <view class="flex flex-col items-center" v-for="item in detail.partner_banks" :key="item.value">
                    <u-image :src="$imgBase + item.value" width="60" height="60"></u-image>
                    <view>{{ item.name }}</view>
                </view>
            </view>
            <view class="title-label">
                <view class="content">贷款申请</view>
            </view>
            <view class="p-3">
                <view class="text-center ">
                    —— 房产信息 ——
                </view>
                <l-selects class="mt-3" label="所在地区" v-model="formData.area" :list="area"
                    returnType="string"></l-selects>
                <l-input class="mt-3" label="楼盘名称" v-model="formData.dm_name"></l-input>
                <l-input class="mt-3" label="详细地址" v-model="formData.address"></l-input>
                <l-input class="mt-3" label="面积" suffix="m²" v-model="formData.floor_area"></l-input>
                <l-input class="mt-3" label="成交价" suffix="万元" v-model="formData.deal_price"></l-input>
                <l-select class="mt-3" label="房屋用途" v-model="formData.property_usage"
                    :list="loan.objToList(loan.房屋用途)"></l-select>
                <l-input class="mt-3" label="首付几成" v-model="formData.down_payment"></l-input>
                <l-select label="贷款年限" class="mt-3" v-model="formData.loan_term" :list="loan.贷款年限"></l-select>
                <l-date-time class="mt-3" v-model="formData.apply_signing_time" label="申请签约时间"
                    mode="datetime"></l-date-time>
            </view>
            <view class="p-3">
                <view class="text-center ">
                    —— 买方信息 ——
                </view>
                <l-input class="mt-3" label="联系方式" v-model="formData.mobile"></l-input>
                <l-input class="mt-3" label="户籍" v-model="formData.registration"></l-input>
                <l-select class="mt-3" label="婚姻状况" :list="loan.objToList(loan.婚姻状况)"
                    v-model="formData.marital_status"></l-select>
                <view class="mt-3">
                    <view>上传身份证正面</view>
                    <l-upload class="mt-3" v-model="formData.id_photo_front"></l-upload>
                </view>
                <view class="mt-3">
                    <view>上传身份证反面</view>
                    <l-upload class="mt-3" v-model="formData.id_photo_back"></l-upload>
                </view>
            </view>
            <l-button class="mx-3" ref="btn" type="primary" @tap="apply">立即申请</l-button>
        </view>
    </l-page>
</template>
<script setup lang="ts">
import Loan from "@/stores/loan";
import Settings from "@/stores/settings";
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
const loan = Loan(), formData = reactive({
    area: '',
    dm_name: '',
    address: '',
    floor_area: '',
    deal_price: '',
    property_usage: '',
    down_payment: '',
    loan_term: '',
    apply_signing_time: '',
    mobile: '',
    registration: '',
    marital_status: '',
    id_photo_front: undefined,
    id_photo_back: undefined,
    salesman_id: ''
}), detail = ref<any>({}), btn = ref(), style = reactive({
    background: ''
}), area = ref<any>([]);
const settings = Settings();
let salesman_id: string

const apply = () => {
    btn.value.showLoading()
    loan.ysfApply({ ...formData }).then((res: any) => {
        loan.toNextPage(res, 1, salesman_id)
    }).finally(() => {
        btn.value.hideLoading()
    })
}
onLoad(async (option: any) => {
    salesman_id = option.salesman_id
    formData.salesman_id = option.salesman_id
    loan.getProductdetail(option.id).then((res: any) => {
        detail.value = res
        style.background = `${res.app_bg_color} url(${import.meta.env.VITE_APP_IMG_URL + res.bg_pic})  center/cover no-repeat`;
    })
    area.value = await settings.getRegions()
})
</script>
<style scoped lang="scss">
:deep(.l-input-label) {
    min-width: 4em;
    text-align-last: justify;

}
</style>